<template>
  <div class="e-commerce-group-wrap">
    <template v-if="!isExhibition">
      <el-tabs v-model="editableTabsValue" closable @tab-remove="handleTabsEdit">
        <el-tab-pane v-for="(item, index) in selectData" :key="index" :name="index + ''" class="e-commerce-item">
          <div slot="label" class="commerce-title"> {{ '商品' + (index + 1) }} </div>
          <div class="e-commerce-form-item e-commerce-edit-form">
            <div class="legal-module-row">
              <el-form-item :prop="'merchandiseInfos.' + index + '.contractCode'" label="关联合同编号" class="normal-form-item">
                <relevan-construct v-model="item.contractCode" :rules="rules" :custom-prop-val="'merchandiseInfos.' + index + '.contractCode'" hide-add />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :rules="rules['merchandiseInfos.productName']" :prop="'merchandiseInfos.' + index + '.productName'" label="产品名称" class="normal-form-item">
                <el-input v-model="item.productName" :maxlength="64" placeholder="请输入产品名称" />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :rules="rules['merchandiseInfos.productSpecification']" :prop="'merchandiseInfos.' + index + '.productSpecification'" label="产品规格" class="normal-form-item">
                <el-input v-model="item.productSpecification" :maxlength="64" placeholder="请输入产品规格" />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :prop="'merchandiseInfos.' + index + '.productSpecificationCode'" label="规格编码" class="normal-form-item">
                <el-autocomplete
                  v-model="item.productSpecificationCode"
                  :fetch-suggestions="queryProductSpecificationCode"
                  value-key="specificationCode"
                  placeholder="请输入规格编码"
                  style="width:240px;"
                  @select="handleSelectCode($event, index)"
                />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item
                :rules="rules['merchandiseInfos.specsFile']"
                :prop="'merchandiseInfos.' + index + '.specsFile'"
                label="规格附件"
                class="normal-form-item label-sticky-top">
                <attachment-picker
                  v-model="item.specsFile"
                  :is-show-date-pick="false"
                  :rules="rules"
                  :index="index"
                  :hide-clip-up="false"
                  :is-verify="false"
                  :module-name="'merchandiseInfos.' + index + '.specsFile'"
                  key-field="attachment"
                  date-field="effectiveDate"
                  @complateSetData="validateField('merchandiseInfos.' + index + '.specsFile.attachment')"
                  @removeFile="validateField('merchandiseInfos.' + index + '.specsFile.attachment')"
                />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :rules="rules['merchandiseInfos.unitPrice']" :prop="'merchandiseInfos.' + index + '.unitPrice'" label="分销/批采单价(元)" class="normal-form-item label-auto-enlarge">
                <el-input
                  v-model="item.unitPrice"
                  oninput="value > 999999999999 && (value=999999999999)"
                  type="number"
                  placeholder="请输入分销/批采单价"
                  @keydown.native="inputNumberLimit"
                  @blur="unitPriceChange(index)"
                />
              </el-form-item>
            </div>
            <div class="legal-module-fill-line">
              <el-form-item
                :rules="rules['merchandiseInfos.productFile']"
                :prop="'merchandiseInfos.' + index + '.productFile'"
                label="产品图片"
                class="normal-form-item label-sticky-top label-shrink-width">
                <attachment-picker
                  v-model="item.productFile"
                  :is-show-date-pick="false"
                  :is-verify="false"
                  :index="index"
                  :hide-clip-up="false"
                  :module-name="'merchandiseInfos.' + index + '.productFile'"
                  :upload-accept="uploadAccept"
                  show-thumbnail
                  key-field="attachment"
                  date-field="effectiveDate"
                  @complateSetData="validateField('merchandiseInfos.' + index + '.productFile.attachment')"
                  @removeFile="validateField('merchandiseInfos.' + index + '.productFile.attachment')"
                />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :prop="'merchandiseInfos.' + index + '.purchaseNum'" label="采购数量" class="normal-form-item">
                <el-input
                  v-model="item.purchaseNum"
                  oninput="value > 999999999999 && (value=999999999999)"
                  type="number"
                  placeholder="请输入采购数量"
                  @keydown.native="inputNumberLimit($event, ['e', '+', '-', '.'])"
                />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :rules="rules['merchandiseInfos.retailPriceRange']" :prop="'merchandiseInfos.' + index + '.retailPriceRange'" label="零售价区间" class="normal-form-item label-auto-enlarge">
                <el-input v-model="item.retailPriceRange" :maxlength="64" placeholder="请输入零售价区间" />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :rules="rules['merchandiseInfos.commissionRatio']" :prop="'merchandiseInfos.' + index + '.commissionRatio'" label="佣金比例" class="normal-form-item">
                <el-input
                  v-model="item.commissionRatio"
                  oninput="value > 999999999999 && (value=999999999999)"
                  type="number"
                  placeholder="请输入佣金比例"
                  @keydown.native="inputNumberLimit"
                />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :rules="rules['merchandiseInfos.isFreeShipping']" :prop="'merchandiseInfos.' + index + '.isFreeShipping'" label="是否包邮" class="normal-form-item">
                <el-radio v-model="item.isFreeShipping" :label="1">是</el-radio>
                <el-radio v-model="item.isFreeShipping" :label="0">否</el-radio>
              </el-form-item>
            </div>
            <div v-if="!item.isFreeShipping" class="legal-module-row">
              <el-form-item :rules="rules['merchandiseInfos.postageDesc']" :prop="'merchandiseInfos.' + index + '.postageDesc'" label="邮费说明" class="normal-form-item">
                <el-input v-model="item.postageDesc" :maxlength="100" placeholder="请输入邮费说明" />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :prop="'merchandiseInfos.' + index + '.deliveryAddress'" label="发货地" class="normal-form-item">
                <el-input v-model="item.deliveryAddress" :maxlength="100" placeholder="请输入发货地" />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :prop="'merchandiseInfos.' + index + '.deliveryPrescription'" label="发货时效" class="normal-form-item">
                <el-input v-model="item.deliveryPrescription" :maxlength="64" placeholder="请输入发货时效" />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :prop="'merchandiseInfos.' + index + '.expressCompany'" label="快递" class="normal-form-item">
                <el-input v-model="item.expressCompany" :maxlength="64" placeholder="请输入快递" />
              </el-form-item>
            </div>
            <div class="legal-module-row">
              <el-form-item :prop="'merchandiseInfos.' + index + '.remark'" label="备注" class="normal-form-item">
                <el-input v-model="item.remark" :maxlength="100" placeholder="请输入备注" />
              </el-form-item>
            </div>
            <div class="legal-module-fill-line expand-box">
              <span class="title" style="padding-left: 12px;">行业证件</span>
              <el-tooltip class="info" effect="dark" content="根据实际上传，如无则不用上传。包括但不限于以下内容。" placement="top-start">
                <tipIcon is-diy class="ml5"/>
              </el-tooltip>
            </div>
            <div style="width: 100%;" class="e-commerce-form-item">
              <div class="legal-module-row">
                <el-form-item
                  :rules="rules['merchandiseInfos.businessLicense']"
                  :prop="'merchandiseInfos.' + index + '.businessLicense'"
                  label="营业执照"
                  class="normal-form-item label-sticky-top">
                  <attachment-picker
                    v-model="item.businessLicense"
                    :is-show-date-pick="false"
                    :is-verify="false"
                    :index="index"
                    :module-name="'merchandiseInfos.' + index + '.businessLicense'"
                    key-field="attachment"
                    date-field="effectiveDate"
                    @complateSetData="validateField('merchandiseInfos.' + index + '.businessLicense.attachment')"
                    @removeFivalidateFieldle="('merchandiseInfos.' + index + '.businessLicense.attachment')"
                  />
                </el-form-item>
              </div>
              <div class="legal-module-row">
                <el-form-item
                  :rules="rules['merchandiseInfos.powerOfAttorney']"
                  :prop="'merchandiseInfos.' + index + '.powerOfAttorney'"
                  label="授权书"
                  class="normal-form-item label-sticky-top">
                  <attachment-picker
                    v-model="item.powerOfAttorney"
                    :is-show-date-pick="false"
                    :is-verify="false"
                    :index="index"
                    :module-name="'merchandiseInfos.' + index + '.powerOfAttorney'"
                    key-field="attachment"
                    date-field="effectiveDate"
                    @complateSetData="validateField('merchandiseInfos.' + index + '.powerOfAttorney.attachment')"
                    @removeFile="validateField('merchandiseInfos.' + index + '.powerOfAttorney.attachment')"
                  />
                </el-form-item>
              </div>
              <div class="legal-module-row">
                <el-form-item
                  :rules="rules['merchandiseInfos.trademarkFile']"
                  :prop="'merchandiseInfos.' + index + '.trademarkFile'"
                  label="商标信息"
                  class="normal-form-item label-sticky-top">
                  <attachment-picker
                    v-model="item.trademarkFile"
                    :is-show-date-pick="false"
                    :is-verify="false"
                    :index="index"
                    :module-name="'merchandiseInfos.' + index + '.trademarkFile'"
                    key-field="attachment"
                    date-field="effectiveDate"
                    @complateSetData="validateField('merchandiseInfos.' + index + '.trademarkFile.attachment')"
                    @removeFile="validateField('merchandiseInfos.' + index + '.trademarkFile.attachment')"
                  />
                </el-form-item>
              </div>
              <select-certificate
                :rules="rules"
                :cur-index="index"
                :certificate-data="item"
                style="padding-left: 12px"
                @completeSetData="validateField"
                @removeFile="validateField"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
    <div v-else :class="{'text-left': showMobilePage}" class="customer-form">
      <el-tabs v-model="editableTabsValue">
        <el-tab-pane v-for="(item, index) in selectData" :key="index" :name="index + ''" class="e-commerce-item">
          <div slot="label" class="commerce-title"> {{ '商品' + (index + 1) }} </div>
          <div :class="{'mobile':showMobilePage}" class="e-commerce-form-item">
            <template v-for="merchandise in merchandiseInfosInitial">
              <template v-if="merchandise.type === 'file'">
                <div v-if="item[merchandise.key] && item[merchandise.key].attachment && item[merchandise.key].attachment.length" :key="merchandise.key" style="width: 100%">
                  <el-form-item :label="merchandise.label + ':'" class="normal-form-item file-label">
                    <SecretText
                      v-if="isComplate && fieldSecret.includes(merchandise.key)"
                      :log-text="getLogText(merchandise)"
                      data-type="field" >
                      <template slot="field">
                        <attachment-picker
                          :show-mobile-page="showMobilePage"
                          :params="item[merchandise.key]"
                          :is-exhibition="true"
                          :is-show-date-pick="!!item[merchandise.key].effectiveDate"
                          :is-verify="false"
                          :index="index"
                          :show-thumbnail="merchandise.showThumbnail"
                          :module-name="'merchandiseInfos.' + index + '.productionLicense'"
                          key-field="attachment"
                          date-field="effectiveDate"
                        />
                      </template>
                    </SecretText>
                    <attachment-picker
                      v-else
                      :show-mobile-page="showMobilePage"
                      :params="item[merchandise.key]"
                      :is-exhibition="true"
                      :is-show-date-pick="!!item[merchandise.key].effectiveDate"
                      :is-verify="false"
                      :index="index"
                      :show-thumbnail="merchandise.showThumbnail"
                      :module-name="'merchandiseInfos.' + index + '.productionLicense'"
                      key-field="attachment"
                      date-field="effectiveDate"
                    />
                  </el-form-item>
                </div>
              </template>
              <template v-else-if="merchandise.type === 'radio'">
                <div :key="merchandise.key" class="legal-module-row">
                  <el-form-item :label="merchandise.label + ':'" class="normal-form-item">
                    {{ !!item[merchandise.key] ? '是' : '否' }}
                  </el-form-item>
                </div>
              </template>
              <template v-else-if="merchandise.type === 'mulCode'">
                <div :key="merchandise.key" class="legal-module-row" style="width: 100%">
                  <el-form-item :label="merchandise.label + ':'">
                    <relevan-construct
                      v-if="item[merchandise.key]"
                      :key="merchandise.key"
                      :is-exhibition="true"
                      :params="item[merchandise.key]"
                    />
                    <span v-else>{{ merchandise.emptyVal || '--' }}</span>
                  </el-form-item>
                </div>
              </template>
              <template v-else>
                <template v-if="!merchandise.dynamicKey || !item[merchandise.dynamicKey]">
                  <div :key="merchandise.key" class="legal-module-row">
                    <el-form-item :label="merchandise.label + ':'" class="normal-form-item">
                      <el-tooltip v-if="item[merchandise.key]" placement="top-start" effect="dark">
                        <div slot="content" style="max-width: 200px;">{{ item[merchandise.key] || merchandise.emptyVal || '--' }}</div>
                        <div class="overflow">{{ item[merchandise.key] || merchandise.emptyVal || '--' }}</div>
                      </el-tooltip>
                      <span v-else>{{ merchandise.emptyVal || '--' }}</span>
                    </el-form-item>
                  </div>
                </template>
              </template>
            </template>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { eCommerceModel, certificateAttachment } from '../../module/options';
import AttachmentPicker from './attachmentPicker';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import addIcon from '@/assets/reportManage/add_icon.png';
import { mapOptions } from '@/filters';
import SelectCertificate from './selectCertificate';
import { getSpecificationCodeList } from '@/api/commerce';
import RelevanConstruct from './relevanConstruct';
export default {
  name: 'ECommerceGroup',
  components: {
    AttachmentPicker,
    SelectCertificate,
    RelevanConstruct,
    selectWithUserLoad
  },
  filters: {
    mapOptions
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Array,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    isExhibition: {
      type: Boolean,
      default: false
    },
    showMobilePage: {// 移动端
      type: Boolean,
      default: false
    },
    isComplate: {// 审批流是否结束，已完成或者已作废都算结束
      type: Boolean,
      default: false
    },
    contractCode: { // 合同编号
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editableTabsValue: 0,
      eCommerceModel,
      certificateAttachment,
      addIcon,
      isExpand: false
    };
  },
  computed: {
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    uploadAccept() {
      return '.png, .jpeg, .jpg';
    },
    fieldSecret() {
      let arr = certificateAttachment.map(i => i.value);
      arr = arr.concat(['businessLicense', 'powerOfAttorney', 'trademarkFile', 'businessPermit']);
      return arr;
    },
    merchandiseInfosInitial() {
      return [
        { key: 'contractCode', label: '关联合同编号', type: 'mulCode', emptyVal: '无' },
        { key: 'productName', label: '产品名称', type: '' },
        { key: 'productSpecification', label: '产品规格', type: '' },
        { key: 'productSpecificationCode', label: '规格编码', type: '' },
        { key: 'unitPrice', label: '分销/批采单价', type: '' },
        { key: 'purchaseNum', label: '采购数量', type: '' },
        { key: 'retailPriceRange', label: '零售价区间', type: '' },
        { key: 'commissionRatio', label: '佣金比例', type: '' },
        { key: 'isFreeShipping', label: '是否包邮', type: 'radio' },
        { key: 'postageDesc', label: '邮费说明', type: '', dynamicKey: 'isFreeShipping' },
        { key: 'deliveryAddress', label: '发货地', type: '' },
        { key: 'deliveryPrescription', label: '发货时效', type: '' },
        { key: 'expressCompany', label: '快递', type: '' },
        { key: 'remark', label: '备注', type: '' },
        { key: 'specsFile', label: '规格附件', type: 'file' },
        { key: 'businessLicense', label: '营业执照', type: 'file' },
        { key: 'powerOfAttorney', label: '授权书', type: 'file' },
        { key: 'trademarkFile', label: '商标信息', type: 'file' },
        { key: 'trademarkLicense', label: '商标注册证', type: 'file' },
        { key: 'hygienicLicense', label: '卫生许可证', type: 'file' },
        { key: 'productionLicense', label: '生产许可证', type: 'file' },
        { key: 'distributionLicense', label: '流通许可证', type: 'file' },
        { key: 'foodBusinessLicense', label: '食品经营许可证', type: 'file' },
        { key: 'printBusinessLicense', label: '出版物经营许可证', type: 'file' },
        { key: 'otherAttachment', label: '其他', type: 'file' },
        { key: 'inspectionReport', label: '质检报告', type: 'file' },
        { key: 'cccCertificate', label: '3C证书', type: 'file' },
        { key: 'businessPermit', label: '经营许可证', type: 'file' },
        { key: 'recordAttachment', label: '备案', type: 'file' },
        { key: 'trustAgreement', label: '委托协议', type: 'file' },
        { key: 'accountOpeningCertificate', label: '开户证明', type: 'file' },
        { key: 'customsDeclaration', label: '报关/报检单', type: 'file' },
        { key: 'productFile', label: '产品图片', type: 'file', showThumbnail: true }
      ];
    }
  },
  created() {
    if (this.$route.name === 'EditContract') {
      this.selectData.forEach(it => {
        if (!it.contractCode.length) {
          it.contractCode = [{ code: '' }];
        }
      });
    }
  },
  methods: {
    inputNumberLimit(e, limitArr = ['e', '+', '-', 'Shift']) {
      const { key } = e;
      // 默认不允许输入'e'、'+'、'-'、'Shift'
      if (limitArr.includes(key)) {
        e.returnValue = false;
        return false;
      }
      return true;
    },
    unitPriceChange(index) {
      const unitPrice = this.selectData[index].unitPrice;
      if (unitPrice || unitPrice === 0) {
        this.selectData[index].unitPrice = Number(unitPrice).toFixed(2);
      }
    },
    add() {
      const length = this.selectData.length ? this.selectData.length - 1 : 0;
      const item = {
        key: length + 1,
        contractCode: [{ code: '' }],
        productName: '',
        productSpecification: '',
        productSpecificationCode: '',
        unitPrice: '', // 分销/批采单价
        purchaseNum: '', // 采购数量
        retailPriceRange: '', // 零售价区间
        commissionRatio: '', // 佣金比例
        isFreeShipping: 0, // 是否包邮
        postageDesc: '', // 邮费说明
        deliveryAddress: '', // 发货地
        deliveryPrescription: '', // 发货时效
        expressCompany: '', // 快递
        remark: '', // 备注
        specsFile: { // 规格附件
          attachment: []
        },
        productFile: { // 产品图片
          attachment: []
        },
        businessLicense: { // 营业执照
          attachment: []
        },
        powerOfAttorney: { // 授权书
          attachment: []
        },
        trademarkFile: { // 商标信息
          attachment: []
        },
        trademarkLicense: { // 商标注册证
          attachment: []
        },
        hygienicLicense: { // 卫生许可证
          attachment: [],
          effectiveDate: ''
        },
        productionLicense: { // 生产许可证
          attachment: [],
          effectiveDate: ''
        },
        distributionLicense: { // 流通许可证
          attachment: [],
          effectiveDate: ''
        },
        foodBusinessLicense: { // 食品经营许可证
          attachment: [],
          effectiveDate: ''
        },
        printBusinessLicense: { // 出版物经营许可证
          attachment: [],
          effectiveDate: ''
        },
        otherAttachment: { // 其他
          attachment: [],
          effectiveDate: ''
        },
        inspectionReport: { // 质检报告
          attachment: [],
          effectiveDate: ''
        },
        cccCertificate: { // 3C证书
          attachment: [],
          effectiveDate: ''
        },
        businessPermit: { // 经营许可证
          attachment: [],
          effectiveDate: ''
        },
        recordAttachment: { // 备案
          attachment: [],
          effectiveDate: ''
        },
        trustAgreement: { // 委托协议
          attachment: [],
          effectiveDate: ''
        },
        accountOpeningCertificate: { // 开户证明
          attachment: [],
          effectiveDate: ''
        },
        customsDeclaration: { // 报关/报检单
          attachment: [],
          effectiveDate: ''
        },
        unsetKey: { // 未定义分类附件存放（非接口数据）
          attachment: [],
          effectiveDate: ''
        }
      };
      this.selectData.push(item);
    },
    deleteStage(index) {
      const isLast = this.selectData.length > 1 && (parseInt(index) === parseInt(this.editableTabsValue)) && parseInt(index) === this.selectData.length - 1;
      if (index !== -1) {
        this.selectData.splice(index, 1);
        isLast && (this.editableTabsValue = parseInt(this.editableTabsValue) - 1 + '');
      }
    },
    handleTabsEdit(targetName) {
      this.deleteStage(targetName);
    },
    validateField(ruleName) {
      this.$emit('validateField', ruleName);
    },
    queryProductSpecificationCode(str, cb) {
      const params = { page: 1, perPage: 20 };
      params.specificationCode = str;
      getSpecificationCodeList(params).then(res => {
        cb(res.data.items);
      }).catch(_ => {});
    },
    handleSelectCode(data, index) {
      this.selectData[index].productSpecificationCode = data.specificationCode;
    },
    getLogText(item) {
      return `合同详情${this.contractCode}的${item.label}`;
    }
  }
};
</script>
<style lang="scss" scoped>
.expand-box {
  display: flex;
  align-items: center;
  .title {
    display: inline-block;
    margin-right: 4px;
    font-size: 16px;
    font-weight: bold;
  }
  .info {
    font-size: 14px;
    margin-right: 13px;
  }
  .expand-text {
    cursor: pointer;
    font-size: 14px;
    color: #406EFF;
    font-weight: bold;
  }
  .arrow-icon {
    transition: transform 0.5s;
    &.expand {
      transform: rotate(180deg);
    }
  }
}
.label-flex-start {
  ::v-deep .el-form-item__label {
    align-self: flex-start;
  }
}
.label-sticky-top {
  ::v-deep .el-form-item__label {
    align-self: flex-start;
    padding-top: 0.35em;
  }
}
.inner-up {
  position: relative;
  height: 1px;
  background-color: #DDDDDD;
  .expend-icon {
    position: absolute;
    width: 112px;
    height: 20px;
    background: #FAFAFC;
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 0px 0px;
    left: 50%;
    bottom: 1px;
    margin-left: -56px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    i {
      transform: rotate(90deg);
    }
  }
}
.customer-form {
  .legal-module-row {
    width: 50%;
    margin-bottom: 0px;
  }
  &::v-deep {
    .el-form-item {
      margin-bottom: 16px;
      height: auto;
      line-height: unset;
      .el-form-item__label {
        height: auto;
        line-height: unset;
        color: #999;
        text-align: right;
      }
      .el-form-item__content {
        height: auto;
        line-height: unset;
      }
    }
    .order-import-button .file-container {
      margin-top: 0;
    }
  }
}
.text-left {
  &::v-deep {
    .el-form-item__label {
      text-align: left !important;
    }
  }
}
.e-commerce-group-wrap{
 & ::v-deep {
   .el-tabs__item {
     &.is-active {
       font-weight: bold;
     }
   }
    .el-tabs__nav-wrap::after {
      background-color: #fff !important;
    }
  }
}
.purchase-unit {
  display: flex;
  .unit {
    & ::v-deep {
      .el-input__inner {
        width: 96px !important;
      }
    }
  }
}
.product-file {
  align-items: center !important;
  max-height: 60px;
  ::v-deep .el-form-item__label {
    padding-top: 0 !important;
  }
}
.e-commerce-form-item {
  display: flex;
  flex-wrap: wrap;
}
.label-shrink-width {
  ::v-deep .el-form-item__label {
    max-width: 85px;
  }
}
@media screen and (min-width: 1366.1px) {
  .e-commerce-edit-form {
    .legal-module-row:nth-child(3n + 8), .legal-module-row:nth-child(-3n + 7) {
      ::v-deep .el-form-item {
        .el-form-item__label {
          max-width: 85px;
        }
      }
    }
  }
}
@media screen and (max-width: 1366.1px) {
  .e-commerce-edit-form {
    .legal-module-row:nth-child(2n + 8), .legal-module-row:nth-child(-2n + 7) {
      ::v-deep .el-form-item {
        .el-form-item__label {
          max-width: 85px;
        }
      }
    }
  }
}
.legal-module-row {
  margin-bottom: 16px;
  width: 33.3%;
}
.legal-module-detail-fill-line {
  display: flex;
  margin-bottom: 32px;
  width: 100%;
}

.legal-module-fill-line {
  margin-bottom: 20px;
  width: 100%;
}

.legal-module-change-fill-line {
  margin-bottom: 32px;
  width: 50%;
}

.commerce-title {
  display: inline-block;
  font-size: 16px;
  .name {
    font-size: 16px;
  }
}
.sub-comments-leave-active,.sub-comments-enter-active {
  transition: max-height 0.3s;
}
.sub-comments-enter,.sub-comments-leave-to {
  max-height:0 ;
}
.sub-comments-enter-to,.sub-comments-leave {
  max-height: 100rem ;
}
.overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mobile {
  .legal-module-row {
    width: 100% !important;
  }
  .file-label {
    ::v-deep .el-form-item__label {
      line-height: 32px !important;
    }
  }
}
@media screen and (max-width: 1366px) {
  .legal-module-row {
    width: 50%;
  }
  .legal-module-change-fill-line {
    width: 100%;
  }
}
@media screen and (max-width: 1496px) {
  .legal-module-change-fill-line {
    width: 100%;
  }
}
</style>
